<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>键盘</title>
		<link rel="stylesheet" href="./css/index.css" />
		<script>
			(function(doc, win) {
				var docEl = doc.documentElement,
					resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
					recalc = function() {
						var clientWidth = docEl.clientWidth;
						if (!clientWidth) return;
						docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
					};

				if (!doc.addEventListener) return;
				win.addEventListener(resizeEvt, recalc, false);
				doc.addEventListener('DOMContentLoaded', recalc, false);
			})(document, window);
		</script>
	</head>
	<body>
		<div class="wrapper">
			<!-- <div class="input_content">这是点是要输入的文字区域</div> -->
			<div class="veryCode_input">
				<!-- <input type="text" class="input_content" placeholder="请输入密码" readonly="readonly" value="" /> -->
				<table class="very_table" cellspacing="0">
					<tr>
						<td><input type="password" readonly></td>
						<td><input type="password" readonly></td>
						<td><input type="password" readonly></td>
						<td><input type="password" readonly></td>
						<td><input type="password" readonly></td>
						<td><input type="password" readonly></td>
					</tr>
				</table>
			</div>
			<div class="keyboard_ctn">
				<h3>© 版权<span class="toggle-btn"></span></h3>
				<ul class="keyboard_bd">

				</ul>
			</div>
		</div>
		<script src="./js/zepto.min.js"></script>
		<script src="./js/touch.js"></script>
		<script src="./js/fx.js"></script>
		<script>
			$(function() {

				$('.very_table').tap(function() {
					$('.keyboard_ctn').animate({
						bottom: "0px"
					}, 300, "ease-in");
					/* document.activeElement.blur(); */
				})

				var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, ".", "0", ""]

				var str = '';
				$.each(arr, function(index, item) {
					//console.log(index, item)
					if (index % 3 == 1 || index % 3 == 2) {
						str += "<li class='border-left border-l-1px'>" + item + "</li>"
					} else {
						str += "<li>" + item + "</li>"
					}

				})
				//$(".keyboard_bd").find("li").eq(11).addClass("iconfont icon-delete");

				//console.log(str);
				$(".keyboard_bd").append(str)

				$(".keyboard_bd").find("li").eq(9).css({
					"line-height": 1.4
				})

				//点击三角形
				$('.toggle-btn').on("tap", function() {
					$('.keyboard_ctn').animate({
						bottom: -$(".keyboard_ctn").height() + "px"
					})
				})

				//回填操作
				var $aLi = $('.keyboard_bd').find('li:not(:last-of-type)');
				var $input = $(".very_table td input");
				//var $inputValue = '';
				var inputStr = '';
				var len;
				$aLi.click(function() {
					//console.log($(this).text());
					if(inputStr.length <= 5) {
						inputStr += $(this).text();
						len = inputStr.length;
						for (var i = 0; i < len; i++) {
							console.log(inputStr)
							/*每个格子的值*/
							$input.eq("" + i + "").val(inputStr[i]);
						}
						
					}else{
						return;
					}
					
					$('.input_content').val(inputStr);
				
				})

				function matchStr(s) {
					var r, re; // 声明变量。
					re = /\./g; // 创建正则表达式模式。
					r = s.match(re); // 尝试去匹配搜索字符串。
					return (r); // 返回的数组包含了所有 "ain"
					// 出现的四个匹配。
				}
				
				function matchStar(n) {
					var r, re; // 声明变量。
					re = /\d/g; // 创建正则表达式模式。
					n.replace(re,'*'); // 尝试去匹配搜索字符串。
				}

				

				//删除操作
				var $delLi = $('.keyboard_bd').find('li:last-of-type');

				$delLi.click(function() {
					
					$('.input_content').val(inputStr.substr(0, len - 1));
					inputStr = inputStr.substr(0, len - 1);
					len = inputStr.length;
						for (var i = len; i >= 0; i--) {
							console.log(inputStr, '---------')
							/*inputStr[i]*/
							$input.eq("" + i + "").val(inputStr[i]);
					}
				})

				//手指按下阴影效果
				$('.keyboard_bd li').on('touchstart', function(event) {
					event.stopPropagation();
					$(this).addClass('clicked');
				})
				//手指松开阴影效果
				$('.keyboard_bd li').on('touchend', function(event) {
					event.stopPropagation();
					$(this).removeClass('clicked');
				})
			})
		</script>
	</body>
</html>
